<template>
  <van-row class="main-menu">
    <van-nav-bar left-text="返回" title="各单位问题情况分析" @click-left="doBack"/>

    <van-cell title="选择日期区间" :value="date" @click="show = true" />
    <van-calendar v-model="show" type="range" @confirm="onConfirm" :min-date="minDate" :max-date="maxDate"/>
    <van-cell>
      <van-dropdown-menu>
        <van-dropdown-item v-model="wtfxfs" :options="fxfslist" />
        <van-dropdown-item v-model="bmmc" :options="bmlist" />
      </van-dropdown-menu>
    </van-cell>
    <van-row class='operate-area' gutter="10">
      <van-col span="24" style="width:100%;">
        <van-button type="info" @click="onSearch">查询</van-button>
      </van-col>
    </van-row>
    <van-row>

    </van-row>
<van-divider class="divider-custom-style">
  问题总计
</van-divider>
    <van-cell-group>
      <van-cell title="问题总数" :value="problem_total" />
    </van-cell-group>
    <van-divider class="divider-custom-style">
  单位自查问题分析
</van-divider>
<van-row>
<analysis-bar-chart chartid="deptCount" title="各部门问题分布" ref = "deptcountchart" />
</van-row>
<van-row>
<analysis-pie-chart chartid="zylbCount" title="专业类别" ref = "zylbcountchart" />
</van-row>
<van-row>
<analysis-sankey-charts chartid="dytxCount" title="对应体系单元及要素" chartStyle="height:700px" ref = "dytxcountchart" />
</van-row>
<van-row>
  <van-col span="12">
    <analysis-pie-chart chartid="slwtCount" title="是否三老问题" ref = "slwtcountchart" />
  </van-col>
  <van-col span="12">
    <analysis-pie-chart chartid="zdblCount" title="是否主动暴露" ref = "zdblcountchart" />
  </van-col>
</van-row>
<van-row>
<analysis-bar-chart chartid="ywsxCount" title="业务事项" ref = "ywsxcountchart" chartStyle="height:700px"/>
</van-row>
<van-row>
  <van-col span="12">
    <analysis-pie-chart chartid="wtyzcdCount" title="问题严重程度" ref = "wtyzcdcountchart" />
  </van-col>
  <van-col span="12">
    <analysis-pie-chart chartid="sscmCount" title="所属层面" ref = "sscmcountchart" />
  </van-col>
</van-row>
  </van-row>
</template>

<script>
import { getDeptGroupList, getDeptProblemAnalysis } from '@/api/analysis'
import AnalysisBarChart from '@/views/analysis/panel/AnalysisBarChart'
import AnalysisPieChart from '@/views/analysis/panel/AnalysisPieChart'
import AnalysisSankeyCharts from '@/views/analysis/panel/AnalysisSankeyCharts'

export default {
  name: 'DeptProblemAnalysis',
  components: { AnalysisBarChart, AnalysisPieChart, AnalysisSankeyCharts },
  data () {
    return {
      date: '',
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 11, 31),
      totalCount: 0,
      condition: {
        department_path: ''
      },
      analysisCondition: {
        department_path: '',
        total: 1,
        begin_date: '',
        end_date: '',
        wtfxfs: 'all',
        bmmc: 'all'
      },
      problem_total: 0,
      wtfxfs: 'all',
      bmmc: 'all',
      fxfslist: [
        { text: '全部', value: 'all' }
      ],
      bmlist: [
        { text: '全部', value: 'all' }
      ]
    }
  },
  mounted () {
    this.condition.department_path = this.$store.state.authInfo.currentDept.department_path
    this.doGetDeptGroupList()
    this.doGetProblemAnalysis()
  },
  methods: {
    doBack () {
      this.$router.back()
    },
    formatDate (date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
    },
    onConfirm (date) {
      const [start, end] = date
      this.analysisCondition.begin_date = this.dateFormat(start, 'yyyy-MM-dd')
      this.analysisCondition.end_date = this.dateFormat(end, 'yyyy-MM-dd')
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.analysisCondition.total = 0
    },
    dateFormat (d, format) {
      var date = {
        'M+': d.getMonth() + 1,
        'd+': d.getDate(),
        'h+': d.getHours(),
        'm+': d.getMinutes(),
        's+': d.getSeconds(),
        'q+': Math.floor((d.getMonth() + 3) / 3),
        'S+': d.getMilliseconds()
      }
      if (/(y+)/i.test(format)) {
        format = format.replace(RegExp.$1, (d.getFullYear() + '').substr(4 - RegExp.$1.length))
      }
      for (var k in date) {
        if (new RegExp('(' + k + ')').test(format)) {
          format = format.replace(RegExp.$1, RegExp.$1.length === 1
            ? date[k] : ('00' + date[k]).substr(('' + date[k]).length))
        }
      }
      return format
    },
    onSearch () {
      this.doGetProblemAnalysis()
    },
    doGetDeptGroupList () {
      getDeptGroupList(this.condition).then(res => {
        let { data } = res
        if (data[this.$response.CODE] === this.$response.SUCCESS) {
          let retdata = data[this.$response.DATA] ? data[this.$response.DATA] : {}
          if (retdata.bmmc) {
            this.bmlist = []
            for (let i = 0; i < retdata.bmmc.length; i++) {
              let opt = {}
              opt.text = retdata.bmmc[i]
              opt.value = retdata.bmmc[i]
              this.bmlist.push(opt)
            }
            this.bmlist.push({ text: '全部', value: 'all' })
          }
          if (retdata.wtfxfs) {
            this.fxfslist = []
            for (let i = 0; i < retdata.wtfxfs.length; i++) {
              let opt = {}
              opt.text = retdata.wtfxfs[i]
              opt.value = retdata.wtfxfs[i]
              this.fxfslist.push(opt)
            }
            this.fxfslist.push({ text: '全部', value: 'all' })
          }
        } else {
          this.$toast.fail('获取数据失败：' + data[this.$response.MESSAGE])
        }
      }, errFunc => {
        this.$notify('服务调用失败：' + errFunc.toString())
        console.log(errFunc.toString())
      })
    },
    doGetProblemAnalysis () {
      let that = this
      this.analysisCondition.bmmc = this.bmmc
      this.analysisCondition.wtfxfs = this.wtfxfs
      this.analysisCondition.department_path = this.$store.state.authInfo.currentDept.department_path
      getDeptProblemAnalysis(this.analysisCondition).then(res => {
        let { data } = res
        if (data[this.$response.CODE] === this.$response.SUCCESS) {
          let retdata = data[this.$response.DATA] ? data[this.$response.DATA] : {}
          if (retdata.bmmc) {
            that.$refs.deptcountchart.renderData(retdata.bmmc)
          }
          if (retdata.zylb) {
            that.$refs.zylbcountchart.renderData(retdata.zylb)
          }
          if (retdata.sfzdbl) {
            that.$refs.zdblcountchart.renderData(retdata.sfzdbl)
          }
          if (retdata.sfslwt) {
            that.problem_total = retdata.sfzdbl[0].count
            if (retdata.sfzdbl.length > 1) {
              that.problem_total += retdata.sfzdbl[1].count
            }
            that.$refs.slwtcountchart.renderData(retdata.sfzdbl)
          }
          if (retdata.wtyzcd) {
            that.$refs.wtyzcdcountchart.renderData(retdata.wtyzcd)
          }
          if (retdata.sscm) {
            that.$refs.sscmcountchart.renderData(retdata.sscm)
          }
          if (retdata.ywsx) {
            that.$refs.ywsxcountchart.renderData(retdata.ywsx)
          }
          if (retdata.dytxdy && retdata.dytxys) {
            that.$refs.dytxcountchart.renderData(retdata.dytxdy.concat(retdata.dytxys), retdata.dytxysLink)
          }
        } else {
          this.$toast.fail('获取数据失败：' + data[this.$response.MESSAGE])
        }
      }, errFunc => {
        this.$notify('服务调用失败：' + errFunc.toString())
        console.log(errFunc.toString())
      })
    }

  }
}
</script>

<style scoped lang="less">
.panel-rectify-filter{
  /deep/ .van-ellipsis {
    font-size: 14px;
  }
  .van-cell{
    height: 50px;
    line-height: 20px;
    padding: 4px 16px;
  }
  .unselect {
    /deep/ .van-dropdown-menu__title {
      color: #969799;
    }
  }
}
.divider-custom-style{
  color: #1989fa;
  border-color: #1989fa;
  padding: 0 16px
}
/deep/.van-button--normal{
    width: 100%;
    margin: 10px 0 0 0; 
    box-sizing: border-box;
    display: inline-block;
}
</style>
